import { ScrollView, View, Image, Text } from '@tarojs/components'

import './index.less'
import { fetchBookType } from '@/api/booktype'
import { useEffect, useState } from 'react'

interface TitleList {
  title: string
  icon: any
}

const list = [
  { title: '精品推荐', icon: require('./images/icon0.png') },
  { title: '历史', icon: require('./images/icon1.png') },
  { title: '文学', icon: require('./images/icon2.png') },
  { title: '艺术', icon: require('./images/icon3.png') },
  { title: '人物传记', icon: require('./images/icon4.png') },
  { title: '自然科学', icon: require('./images/icon5.png') },
  { title: '国外读物', icon: require('./images/icon6.png') },
]

const ComBar = () => {
  const [list, setList] = useState<TitleList[]>([])
  const getListData = async () => {
    const res = await fetchBookType()

    const resulte = res?.data?.map((item, index) => ({
      title: item.name,
      icon: require(`./images/icon${index}.png`),
    }))

    setList(resulte)

  }

  useEffect(() => {
    getListData()
  }, [])

  return (
    <ScrollView className='combar' scrollX>
      {list.map((item) => (
        <View key={item.title} className='combarItem'>
          <View className='combarItemView'>
            <Image className='combarItemImage' src={item.icon}></Image>
          </View>
          <View className='combarItemText'>{item.title}</View>
        </View>
      ))}
    </ScrollView>
  )
}

export default ComBar
